@charset 'utf-8';
@import 'reset';
$font-size:16px;
@function r($px) {
    @return $px/$font-size * 1rem;
}

.web {
    height: 100%;
    width: 100vw;
    background: lavender;
    .active_page {
        width: 100vw;
        height: 100vh;
        background: lavender;
        position: relative;
        overflow: hidden;
        transition: transform 0.8s ease-in-out;
        display: block;
        .web_bg {
            width: 100vw;
            height: 100vh;
            font-size: 0;
            position: absolute;
            top: 0;
            left: 0;
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .index_page {
            position: absolute;
            z-index: 5;
            width: 100vw;
            height: 100vh;
            .index_title {
                width: 100vw;
                height: 10.4vw;
                position: absolute;
                top: 1vw;
                left: 0;
                z-index: 5;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                .active_description,
                .prize {
                    text-align: center;
                    font-size: 0;
                    color: #ffffff;
                    img {
                        display: inline-block;
                        width: 5vw;
                    }
                    p {
                        font-size: r(16px);
                    }
                }
                .active_description {
                    margin-left: 2vw;
                }
                .prize {
                    margin-right: 2vw;
                }
                .main_title {
                    font-size: r(36px);
                    color: #ffffff;
                    font-weight: 600;
                    letter-spacing: 2px;
                    margin-bottom: 3vw;
                }
            }
            .index_marquee {
                position: absolute;
                width: 87.4vw;
                height: 7vw;
                left: 6.3vw;
                top: 12vw;
                background: rgba(247, 247, 247, 0.8);
                z-index: 5;
                border-radius: 5.6vw;
                display: flex;
                justify-content: flex-start;
                font-weight: 600;
                .marquee_tip {
                    width: 32vw;
                    height: 7vw;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    font-size: 0;
                    color: #fc7641;
                    padding-left: 2.5vw;
                    img {
                        display: block;
                        width: 6.5vw;
                        height: 5.13vw;
                    }
                    .marquee_title {
                        font-size: r(30px);
                    }
                }
                .marquee_con {
                    width: 49.3vw;
                    height: 7vw;
                    display: flex;
                    align-items: center;
                    font-size: r(30px);
                    color: #fc7641;
                    overflow: hidden;
                    animation: marquee 35s linear infinite;
                    .marquee {
                        p {
                            white-space: nowrap;
                            padding-left: 1vw;
                        }
                    }
                    @keyframes marquee {
                        0% {
                            text-indent: 60vw;
                        }
                        100% {
                            text-indent: -800vw;
                        }
                    }
                }
            }
            .index_pull_abos {
                position: absolute;
                width: 80vw;
                height: 102vw;
                top: calc(50vh - 51vw);
                left: 10vw;
                z-index: 100;
                .index_pull {
                    width: 80vw;
                    height: 102vw;
                    position: relative;
                    .box {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 80vw;
                        height: 102vw;
                        background: #ffffff;
                        border-radius: r(10px);
                        overflow: hidden;
                        border: 1px solid #F1F2F6;
                        transition: all 0.5s linear;
                        .box_pic {
                            width: 80vw;
                            height: 83.3vw;
                            font-size: 0;
                            img {
                                width: 100%;
                                height: 100%;
                                display: block;
                                border-radius: r(10px);
                            }
                        }
                        .box_word {
                            padding-left: 2vw;
                            width: 80vw;
                            height: 26.7vw;
                            p:nth-child(1) {
                                font-size: r(36px);
                                color: #fc7641;
                                font-weight: 600;
                                width: 78vw;
                                white-space: nowrap;
                                overflow: hidden;
                            }
                            p:nth-child(2) {
                                font-size: r(24px);
                                color: #363636;
                                width: 78vw;
                                white-space: nowrap;
                                overflow: hidden;
                            }
                            p:nth-child(3) {
                                font-size: r(30px);
                                color: #e5403a;
                                width: 78vw;
                                white-space: nowrap;
                                overflow: hidden;
                            }
                        }
                    }
                    // .box:nth-child(1) {
                    //     z-index: 99;
                    //     transform: scale(1);
                    // }
                    // .box:nth-child(2) {
                    //     z-index: 98;
                    //     transform: scale(0.97) translateY(10px);
                    // }
                    // .box:nth-child(3) {
                    //     z-index: 97;
                    //     transform: scale(0.94) translateY(20px);
                    // }
                    // .box:nth-child(4) {
                    //     z-index: 96;
                    //     transform: scale(0.94) translateY(20px);
                    // }
                    // .box:nth-child(5) {
                    //     z-index: 95;
                    //     transform: scale(0.94) translateY(20px);
                    // }
                }
            }
            .index_bottom {
                position: absolute;
                bottom: 3vw;
                width: 68.6vw;
                height: 16.6vw;
                left: 15.7vw;
                display: flex;
                justify-content: space-between;
                .bottom_l,
                .bottom_r {
                    width: 16.6vw;
                    height: 16.6vw;
                    font-size: 0;
                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
            }
        }
    }
    .description_page {
        width: 100vw;
        height: 110vh;
        background-color: #f1f2f6;
        display: none;
        .description_bg {
            width: 100vw;
            height: 110vh;
            font-size: 0;
            position: absolute;
            top: 0;
            left: 0;
            img {
                display: block;
                width: 100vw;
                height: 110vh;
            }
        }
        .des_title {
            width: 100vw;
            height: 8.4vw;
            position: absolute;
            top: 2vw;
            left: 0;
            z-index: 5;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            font-size: r(36px);
            color: #ffffff;
        }
        .des_header {
            width: 100%;
            height: 8vw;
            position: absolute;
            top: 12vw;
            left: 0;
            z-index: 5;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            font-size: r(58px);
            color: #ffffff;
        }
        .des_main {
            width: 80vw;
            position: absolute;
            top: 23vw;
            left: 10vw;
            z-index: 5;
            border-radius: 2vw;
            background-color: #ffffff;
            margin-bottom: 30vw;
            .des_surprise {
                margin-top: 4vw;
                margin-left: 2vw;
                font-size: r(32px);
                color: #1a1919;
                font-weight: 550;
            }
            .des_tip {
                margin-top: 2vw;
                margin-left: 2vw;
                font-size: r(24px);
                color: #2e2e2e;
                p {
                    line-height: 4.5vw;
                }
            }
            .des_more {
                margin-top: 2vw;
                margin-left: 2vw;
                font-size: r(24px);
                color: #2e2e2e;
                font-weight: 550;
                P {
                    &:nth-child(1) {
                        font-size: r(28px);
                        margin-bottom: 1vw;
                    }
                }
            }
            .des_luck {
                margin-top: 2vw;
                margin-left: 2vw;
                margin-bottom: 4vw;
                font-size: r(32px);
                color: #f8662c;
                font-weight: 550;
            }
        }
        .des_back {
            font-size: r(50px);
            position: absolute;
            top: 2vw;
            left: 2vw;
            z-index: 99;
            color: #ffffff;
        }
    }
    .prize_page {
        width: 100vw;
        height: 100%;
        background-color: #f1f2f6;
        display: none;
        .prize_bg {
            width: 100vw;
            height: 100vh;
            font-size: 0;
            position: absolute;
            top: 0;
            left: 0;
            img {
                display: block;
                width: 100vw;
                height: 100vh;
            }
        }
        .prize_title {
            width: 100vw;
            height: 8.4vw;
            position: absolute;
            top: 2vw;
            left: 0;
            z-index: 5;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            font-size: r(36px);
            color: #ffffff;
        }
        .prize_header {
            width: 100%;
            height: 8vw;
            position: absolute;
            top: 12vw;
            left: 0;
            z-index: 5;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            font-size: r(58px);
            color: #ffffff;
        }
        .prize_main {
            width: 80vw;
            position: absolute;
            top: 20vw;
            left: 10vw;
            .prize_card {
                background-color: #ffffff;
                border-radius: 3vw;
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-bottom: 3vw;
                box-shadow: 0px 1px 11px #f2793c;
                .prize_img {
                    width: 80vw;
                    height: 20vw;
                    border-radius: 3vw;
                    overflow: hidden;
                    display: inline-block;
                    margin: 2vw;
                    background-color: #f2793c;
                    font-size: 0;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .prize_text {
                    width: 70vw;
                    height: 20vw;
                    P:nth-child(1) {
                        width: 99%;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    p:nth-child(2) {
                        margin-top: 4vw;
                    }
                }
            }
        }
        .prize_back {
            font-size: r(50px);
            position: absolute;
            top: 2vw;
            left: 2vw;
            z-index: 99;
            color: #ffffff;
        }
    }
    .detail_page {
        width: 100vw;
        height: 105vh;
        position: absolute;
        background-color: #f1f2f6;
        display: none;
        top: 0;
        left: 0;
        z-index: 101;
        .detail_bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            font-size: 0;
            img {
                width: 100%;
                height: 100%;
                display: block;
            }
        }
        .detail_pub {
            display: none;
            .swiper-container {
                width: 100vw;
                height: 100vw;
                position: absolute;
                top: 0vw;
                left: 0;
                .swiper-wrapper {
                    width: 100%;
                    height: 100%;
                    .detail_img {
                        width: 100vw;
                        height: 100vw;
                        font-size: 0;
                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            .big {
                animation-name: big;
                animation-duration: 0.8s;
                animation-timing-function: ease-in-out;
                animation-direction: normal;
                animation-iteration-count: 1;
            }
            @keyframes big {
                from {
                    transform: scale(0.8);
                }
                to {
                    transform: scale(1);
                }
            }
            .detail_main {
                position: absolute;
                top: 100vw;
                left: 0;
                padding: 2vw;
                background: f1f2f6;
                .detail_grade {
                    display: flex;
                    justify-content: space-between;
                    h3 {
                        font-size: r(60px);
                        color: #533d2f;
                        margin: 0;
                    }
                    .feeling {
                        width: 30vw;
                        display: flex;
                        justify-content: space-between;
                        .unlike,
                        .like {
                            width: 9.3vw;
                            font-size: 0;
                            height: 9.3vw;
                            img {
                                display: block;
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
                .detail_comment {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    p {
                        &:nth-child(1) {
                            font-size: r(132px);
                            color: #f67d48;
                        }
                        &:nth-child(2) {
                            font-size: r(36px);
                            color: #6f6e73;
                            span {
                                margin-left: 2vw;
                            }
                        }
                    }
                }
                .detail_con {
                    width: 100%;
                    background-color: #f4d4ab;
                    box-sizing: border-box;
                    padding: 4vw 6vw 2vw;
                    border-radius: 2vw;
                    position: relative;
                    h4 {
                        margin: 0;
                        font-size: r(45px);
                        color: #000000;
                    }
                    ul {
                        display: flex;
                        justify-content: flex-start;
                        padding: 0;
                        margin: 1vw 0;
                        li {
                            width: 2.6vw;
                            height: 2.6vw;
                            background: url(../img/y_star.png) no-repeat center center/100%;
                            display: none;
                        }
                    }
                    p {
                        font-size: r(24px);
                        color: #4e352a;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 5;
                        -webkit-box-orient: vertical;
                    }
                    span {
                        font-size: r(24px);
                        color: #f2793c;
                        position: absolute;
                        right: 6vw;
                        bottom: 2vw;
                        background-color: #f4d4ab;
                        box-shadow: -10px 0px 8px #f4d4ab;
                    }
                }
            }
            .up {
                animation-name: up;
                animation-duration: 0.8s;
                animation-timing-function: ease-in-out;
                animation-direction: normal;
                animation-iteration-count: 1;
            }
            @keyframes up {
                from {
                    top: 250vw;
                }
                to {
                    top: 110vw;
                }
            }
        }
    }
}